<template>
  <view>
    <biaotou title="被谈话人信息"></biaotou>
    <tn-form ref="form" :labelWidth="180" :errorType="['message', 'toast']">
      <view v-for="(item, index) of form" :key="index">
        <!--操作按钮-->
        <template>
          <tn-button @click="yijianluru" v-if="index===0" style="position: absolute;right: 30rpx;z-index: 99"
                     class="tn-bg-blue tn-color-white tn-padding-lg tn-padding-top-sm tn-padding-bottom-sm">一键录入
          </tn-button>
        </template>
        <view class="tn-text-center">- {{ index + 1 }} -</view>
        <tn-form-item label="被谈话人：" prop="name" :labelWidth="200">
          <tn-input v-model="item.name"/>
        </tn-form-item>
        <tn-form-item label="性别：" prop="gender">
          <input-select v-model="item.gender" :list="sexTypeJson"/>
        </tn-form-item>
        <tn-form-item label="年龄：" prop="age">
          <tn-input v-model="item.age"/>
        </tn-form-item>
        <tn-form-item label="电话：" prop="telephone">
          <tn-input v-model="item.telephone"/>
        </tn-form-item>
        <tn-form-item label="邮编：" prop="zipcode">
          <tn-input v-model="item.zipcode"/>
        </tn-form-item>
        <tn-form-item label="职业：" prop="job">
          <input-select v-model="item.job" :list="zhiyeJson" :keyValue="zhiyeKeyValue"/>
        </tn-form-item>
        <tn-form-item label="单位：" prop="companyName">
          <tn-input v-model="item.companyName"/>
        </tn-form-item>
        <tn-form-item label="证件类型：" prop="idcard">
          <input-select v-model="item.idcard" :list="zhengjianJson" :keyValue="zhengjianKeyValue"/>
        </tn-form-item>
        <tn-form-item label="证件号：" prop="idcardNum">
          <tn-input v-model="item.idcardNum"/>
        </tn-form-item>
        <tn-form-item label="住址：" prop="conAddr">
          <tn-input type="textarea" v-model="item.conAddr"/>
        </tn-form-item>

        <tn-form-item label="谈话开始时间：" prop="startTime" :labelWidth="260">
          <uni-datetime-picker :clearIcon="false" :border="false" placeholder="请选择发生时间"
                               v-model="item.startTime"/>
        </tn-form-item>
        <tn-form-item label="谈话结束时间：" prop="endTime" :labelWidth="260">
          <uni-datetime-picker :clearIcon="false" :border="false" placeholder="请选择发生时间"
                               v-model="item.endTime"/>
        </tn-form-item>
        <tn-form-item label="谈话地点：" prop="askLocation">
          <tn-input v-model="item.askLocation"/>
        </tn-form-item>
        <tn-form-item label="与案件关系：" prop="relation" :labelWidth="260">
          <tn-input v-model="item.relation"/>
        </tn-form-item>
        <view class="tn-flex tn-flex-direction-row-reverse" style="margin-top:10px;">
          <tn-button @click="listAdd" v-if="index===form.length-1 && form.length<4"
                     style="margin-left: 20rpx;"
                     class="tn-bg-blue tn-color-white tn-padding-lg tn-padding-top-sm tn-padding-bottom-sm">增加谈话人
          </tn-button>
          <tn-button @click="listPop(index)" v-if="form.length>1"
                     class="tn-bg-red tn-color-white tn-padding-lg tn-padding-top-sm tn-padding-bottom-sm">删除
          </tn-button>
        </view>
      </view>
    </tn-form>

  </view>
</template>

<script>
import InputSelect from "@/components/inputSelect";
import Biaotou from "./biaotou.vue";
import {selectDicByCode} from "@/api/lupeiwenshu";
import {sexTypeJson} from "@/pages/roadCompensation/mock/mockJson";

export default {
  components: {Biaotou, InputSelect},
  data() {
    return {
      sexTypeJson,

      zhiyeKeyValue: {
        value: 'name',
        label: 'name'
      },
      zhiyeJson: [],

      zhengjianKeyValue: {
        value: 'name',
        label: 'name'
      },
      zhengjianJson: [],

      form: [{
        name: '',
        gender: '1',
        age: '',
        telephone: '',
        zipcode: '',
        job: '司机',
        companyName: '',
        idcard: '身份证',
        idcardNum: '',
        conAddr: '',
        startTime: '',
        endTime: '',
        askLocation: '',
        relation: '',
      }],
    };
  },
  methods: {
    yijianluru() {
      const form_ren = this.$parent.$parent.$parent.$refs.danshiren.form;
      const form_anjian = this.$parent.$parent.$parent.$refs.anjianxinxi.form;
      this.form[0] = {
        name: form_ren.clientName,
        gender: form_ren.clientGender,
        age: form_ren.clientAge,
        telephone: form_ren.clientTel,
        zipcode: form_ren.zipcode,
        job: form_ren.clientJob,
        companyName: form_ren.clientComName,
        idcard: form_ren.clientIdcard,
        idcardNum: form_ren.clientIdcardNum,
        conAddr: form_ren.clientAddress,

        startTime: form_anjian.inquestStart1,
        endTime: form_anjian.inquestEnd1,
        askLocation: form_anjian?.enquireIds + form_anjian?.kNum +'+'+ form_anjian?.mNum,
        relation: form_ren.clientRelation,
      }
      this.form = [...this.form];
    },
    async initSelectJson() {
      this.zhengjianJson = (await selectDicByCode('zjlx')).data;
      this.zhiyeJson = (await selectDicByCode('job')).data;
    },
    listAdd() {
      this.form.push({
        name: '',
        gender: '1',
        age: '',
        telephone: '',
        zipcode: '',
        job: '',
        companyName: '',
        idcard: '身份证',
        idcardNum: '',
        conAddr: '',
        startTime: '',
        endTime: '',
        askLocation: '',
        relation: '',
      });
    },
    listPop(index) {
      this.form.splice(index, 1);
    }
  },
  mounted() {
    this.initSelectJson();
  },

};
</script>
